<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }

        .quanquan {
            width: 100px;
            height: 100px;
            background-color: #599b01;
            border-radius: 50%;
        }

        .quanquan:hover {
            background-color: #54f2e1;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=e3235e7532866c446c0c406bd3c17388"></script>
    <script>
        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 20, //初始化地图层级
            center: [118.798041, 32.044498] //初始化地图中心点
        });

        var marker = new AMap.Marker({
            map: map,
            position: [118.798041, 32.044498],
            content: "<div class='quanquan'></div>" // 自定义覆盖物样式， 可传可不传
        });

        // 构造点标记
        // var marker = new AMap.Marker({
        //     icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        //     position: [116.405467, 39.907761]
        // });

        // map.add(marker);
    </script>
</body>

</html>